# UnoCSS

[UnoCSS](https://unocss.dev/) 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。

你可以通过 [@unocss/webpack](https://npmjs.com/package/@unocss/webpack) 插件来在 Rsbuild 中接入 UnoCSS。

## 安装 UnoCSS

首先，你需要安装 `@unocss/webpack`。

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @unocss/webpack -D" />

## 配置插件

在 [tools.rspack](/config/tools/rspack) 中注册 UnoCSS 的插件：

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          // options
        }),
      ],
    },
  },
});
```

通过 `UnoCSSRspackPlugin` 的选项可以添加 UnoCSS 的 Presets，例如：

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
import { presetAttributify } from '@unocss/preset-attributify';
import { presetUno } from '@unocss/preset-uno';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          presets: [presetUno(), presetAttributify()],
        }),
      ],
    },
  },
});
```

:::tip
上述配置仅供参考，你可以根据项目需要进行调整。
:::

## 引入 CSS

在 JavaScript 入口文件中引用 `uno.css`：

```js title="main.js"
import 'uno.css';
```

## 完成

你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤！

你可以在任意组件或 HTML 中使用 UnoCSS 的 utility classes，比如：

```html
<h1 class="px-2 items-center justify-between">Hello world!</h1>
```

更多用法请参考 [UnoCSS 文档](https://unocss.dev/)。

## VS Code 插件

UnoCSS 提供了 [VS Code 插件](https://unocss.dev/integrations/vscode)，用于在 VS Code 中提示 UnoCSS 的 utilities classes。

你可以在 VS Code 中安装该插件，即可开启更多智能化功能。
